<style lang="scss" scoped>
.header {
  width: 100%;
  height: 60px;
  background-image: url('https://kano.guahao.com/i8j817030135');
  display: flex;
  background-size: 100px 100%;

  .header-left {
    width: 30%;
  }

  .header-right {
    width: 70%;
  }
}

.search {
  background: #427dfd;
  border-radius: 15px;
  width: 60px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  position: absolute;
  color: white;
  right: 25px;
  top: 15px;
}

.therr {
  display: flex;

  .therr-item {
    text-align: center;
    margin-left: 20px;
    width: 32%;

    span {
      font-size: 12px;
      color: #ccc;
    }

    dt {
      text-align: center;
    }
  }
}

.happycity {
  margin-top: 10px;
}

.content {
  width: 100%;
  height: 100px;
  display: flex;
  flex-wrap: wrap;

  .content-item {
    width: 70px;
    height: 50px;
    text-align: center;

    img {
      width: 40px;
      height: 40px;
    }

    p {
      font-size: 12px;
    }
  }
}

.new-user {
  width: 80%;
  border: 2px solid sandybrown;
  margin-left: 10%;
  margin-top: 10px;
  background: #fffafa;
  height: 200px;
  border-radius: 30px;

  .new-user__content {
    width: 100%;
    display: flex;

    .new-user__content-item {
      width: 25%;
      height: 120px;
      margin-left: 20px;
      border: 1px solid red;
      border-radius: 10px;
      text-align: center;

      button {
        border: 0;
      }
    }
  }
}

.pifu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .pifu-item {
    margin: 10px 10px;
    width: 28%;
    border: 1px solid #ccc;
    background: #f4f6fa;
    border-radius: 10px;

    p {
      font-size: 12px;
      color: #ccc;
    }
  }
}

.swiper {
  width: 95%;
  margin-left: 10px;
  height: 100px;

  img {
    width: 100%;
    height: 100%;
  }
}

.vip {
  margin-top: 20px;
  margin-right: 10px;
  height: 150px;
  width: 100%; // 容器宽度
  overflow-x: auto; // 启用横向滚动
  white-space: nowrap; // 防止换行

  .vip-item {
    display: inline-block;
    width: 150px; // 每个项的宽度
    height: 100%; // 每个项的高度
    margin-right: 10px; // 项之间的间距
    color: #fff;
    border: 1px solid #ccc; // 可选的边框样式
    margin-left: 10px;

    p {
      font-size: 12px;
    }
  }
}

.tabList {
  display: flex;
  flex-wrap: wrap;

  .tabList-item {
    width: 161px;
    margin: 10px 13px;

    img {
      width: 100%;
      height: 150px;
    }
  }
}

.tablist2 {
  display: flex;
  flex-wrap: wrap;

  .tablist2-item {
    width: 160px;
    margin: 10px 10px;
  }
}

.tabList3 {
  background-color: #f4f4f4;
  column-count: 2;
  .tablist3-item {
    background: #ccc;
    .title {
      font-weight: 600;
    }

    .wound {
      width: 35px;
      height: 20px;
      font-size: 12px;
      text-align: center;
      border-radius: 3px;
      color: #005bcb;
      border: 1px solid #005bcb;
      float: left;
      margin-right: 5px;
    }
  }
}

</style>
<template>
  <div>
    <van-nav-bar title="微医" />
    <!-- 顶部 -->
    <div class="header">
      <div class="header-left">
        <h2
          style="color: white; line-height: 60px; margin-left: 20px"
          @click="$router.push('/index/map')"
        >
          {{ city }} <span>▽</span>
        </h2>
      </div>
      <div class="header-right">
        <div style="display: flex">
          <img src="../../../public/image/3.png" height="50" alt="" />
          <span style="color: white; line-height: 50px; line-height: 60px">微医·数字医院</span>
        </div>
      </div>
    </div>
    <!-- 搜索 -->
    <div style="position: relative">
      <van-sticky>
        <van-search
          v-model="searchValue"
          placeholder="请输入搜索内容"
          show-action
          @click="onClickButton"
          shape="round"
        >
          <template #action>
            <div class="search">搜索</div>
          </template>
        </van-search>
      </van-sticky>
    </div>
    <!--三个图标 -->
    <div class="therr">
      <div class="therr-item">
        <dl @click="$router.push('/index/Quickconsultation')">
          <dt>
            <img
              src="https://kano.guahao.com/W51849727945?webp=80"
              width="50%"
              height="50%"
              alt=""
            />
          </dt>
          <dd>
            <h3>快速问诊</h3>
            <span>3分钟内医生接诊</span>
          </dd>
        </dl>
      </div>

      <div class="therr-item">
        <dl @click="$router.push('/index/Expertconsultation')">
          <dt>
            <img
              src="https://kano.guahao.com/2x4849728905?webp=80"
              width="50%"
              height="50%"
              alt=""
            />
          </dt>
          <dd>
            <h3>专家问诊</h3>
            <span>专家实时在线服务</span>
          </dd>
        </dl>
      </div>
      <div class="therr-item">
        <dl>
          <dt @click="$router.push('/index/Goregister')">
            <img
              src="https://kano.guahao.com/U0m513250003?webp=80"
              width="50%"
              height="50%"
              alt=""
            />
          </dt>
          <dd>
            <h3>去挂号</h3>
            <span>千家号源免费预约</span>
          </dd>
        </dl>
      </div>
    </div>
    <!-- 海南乐城 -->
    <div class="happycity">
      <img
        src="https://kano.guahao.com/vGY932025012?webp=80"
        height="70"
        width="100%"
        normal="loaded"
      />
    </div>
    <!-- 宫格布局 -->
    <div >
      <Ggbj></Ggbj>
      <!-- <div v-for="(item, index) in list" :key="index" class="content-item" @click="tz(item.title)">
        <img v-lazy="item.image" alt="" />
        <p>{{ item.title }}</p>
      </div> -->
    </div>
    <!-- 新用户 -->
    <div class="new-user" @click="$router.push('/index/newuser')">
      <h4 style="margin-top: 10px; margin-left: 10px">新用户专享礼</h4>
      <span style="float: right; margin-bottom: 10px">更多好礼></span>
      <div class="new-user__content">
        <div class="new-user__content-item">
          <p>快速问诊</p>
          <p style="color: red"><span style="font-weight: 600; font-size: 30px">5</span>元</p>
          <p style="color: red; font-size: 20px">特惠价</p>
          <button style="border-radius: 30px; color: red">去领取</button>
        </div>
        <div class="new-user__content-item">
          <p>专家问诊</p>
          <p style="color: red"><span style="font-weight: 600; font-size: 30px">6</span>折</p>
          <p style="color: red; font-size: 20px">无门槛</p>
          <button style="border-radius: 30px; color: red">去领取</button>
        </div>
        <div class="new-user__content-item">
          <p>维达抽纸</p>
          <p style="color: red"><span style="font-weight: 600; font-size: 30px">4.9</span>元</p>
          <p style="color: red; font-size: 20px">优惠价</p>
          <button style="border-radius: 30px; color: red">去领取</button>
        </div>
      </div>
    </div>
    <!-- 病症区 -->
    <div class="pifu">
      <div class="pifu-item" @click="$router.push('/index/pifubing')">
        <h4>皮肤科专区</h4>
        <p><span style="color: skyblue">9.9元</span>起</p>
        <p>问一声</p>
      </div>
      <div class="pifu-item" @click="$router.push('/index/erke')">
        <h4>儿科专区</h4>
        <p>发烧 流感</p>
        <p>生长发育</p>
      </div>
      <div class="pifu-item" @click="$router.push('/index/fuke')">
        <h4>妇科专区</h4>
        <p>月经 炎症</p>
        <p>早孕</p>
      </div>
      <div class="pifu-item" @click="$router.push('/index/jianzhong')">
        <h4>减重专区</h4>
        <p>减肥 减脂</p>
        <p>控重</p>
      </div>
      <div class="pifu-item" @click="$router.push('/index/weichang')">
        <h4>胃肠专区</h4>
        <p>腹泻 胃痛</p>
        <p>胃肠镜</p>
      </div>
      <div class="pifu-item" @click="$router.push('/index/xinli')">
        <h4>心理专区</h4>
        <p>焦虑 抑郁</p>
        <p>情感困惑</p>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 会员服务 -->
    <div>
      <h2 style="margin-left: 10px">会员服务</h2>
      <div class="vip">
        <div
          class="vip-item"
          style="
            background-image: url('	https://kano.guahao.cn//3mN838145303.jpg?timestamp=1682581277323&resize=332:x&webp=80');
          "
        >
          <div
            class="vip-item"
            style="
              background-image: url('https://oss-vcg6.xpccdn.com/prod/demo/photo/no_water/P9Q3RTPeJXhWnnE-%E5%8C%BB%E5%AD%A6%E4%B8%93%E4%B8%9A%E4%BA%BA%E5%A3%AB%E7%9A%84%E6%A0%87%E5%BF%97.jpg?uid=493&timestamp=1712416518&sign=d2650e2efa431c024a0b0de863d620b5&x-oss-process=style%2Fstock_photo_watermark');
            "
          >
            <div style="margin-top: 80px" @click="router.push('/index/healthyvip')">
              <h3>健康VIP</h3>
              <p>·三甲号源提醒</p>
              <p>·专家问诊85折</p>
            </div>
          </div>
        </div>
        <div
          class="vip-item"
          style="
            background-image: url('https://oss-vcg6.xpccdn.com/prod/demo/photo/no_water/YK6zWg00OQlWEno-%E5%8C%BB%E7%94%9F%E5%81%9A%E5%A4%96%E7%A7%91%E7%BC%9D%E9%92%88.jpg?x-oss-process=style%2Fstock_photo_watermark');
          "
        >
          <div style="margin-top: 80px">
            <h3>育儿指南</h3>
            <p>·名医问诊 低至3...</p>
            <p>·复旦优质儿童医生</p>
          </div>
        </div>
        <div
          class="vip-item"
          style="
            background-image: url('https://oss-vcg6.xpccdn.com/prod/demo/photo/no_water/T3Ba0Q16XgJoYbu-%E4%BC%A0%E7%BB%9F%E7%9A%84%E4%B8%AD%E5%8C%BB%E8%B0%83%E5%89%82%E8%8D%AF%E7%89%A9%E6%88%90%E5%88%86.jpg?x-oss-process=style%2Fstock_photo_watermark');
          "
        >
          <div style="margin-top: 80px">
            <h3>骨科康复</h3>
            <p>·专业治疗师</p>
            <p>·居家远程锻炼</p>
          </div>
        </div>
        <div
          class="vip-item"
          style="
            background-image: url('https://kano.guahao.cn//3EJ833989467.jpg?timestamp=1681453224930&resize=332:x&webp=80');
          "
        >
          <div style="margin-top: 80px">
            <h3>企业会员</h3>
            <p>·定制化解决方案</p>
            <p>·一站式健康管理</p>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div style="display: flex">
        <h2 style="margin-left: 10px">服务精选</h2>
        <span style="line-height: 35px">/由第三方合作机构提供</span>
      </div>
      <div>
        <img
          src="https://kano.guahao.com/fNg878875994?webp=80"
          style="width: 100%; height: 100px"
          alt=""
        />
      </div>
    </div>
    <!-- Tab 切换-->
    <div>
      <van-tabs>
        <van-tab title="医生推荐">
          <van-tabs>
            <van-tab v-for="(item, index) in tabbarlist" :key="index" :title="item.title">
              <div v-if="item.title == `${item.title}`">
                <van-list
                  @load="load"
                  :loading="loading"
                  finished-text="数据没有了"
                  :finished="finished"
                  class="tabList"
                >
                  <div v-for="(v, i) in tabbarlistChild" :key="i">
                    <div
                      v-if="v.department == `${item.title}`"
                      class="tabList-item"
                      @click="Detail(v)"
                    >
                      <img v-lazy="v.image" style="width: 100%" alt="" />
                      <div>{{ v.title }}</div>
                      <div>{{ v.name }} {{ v.doctor }}</div>
                      <div>{{ v.department }}</div>
                      <div>
                        <span style="color: red">￥</span
                        ><span style="font-size: 20px; color: red; font-weight: bold">{{
                          v.price
                        }}</span>
                        <span style="color: red">起</span>
                      </div>
                    </div>
                    <div v-if="item.title == '全部'" class="tabList-item" @click="Detail(v)">
                      <img :src="v.image" style="width: 100%" alt="" />
                      <div>所属医院:{{ v.title }}</div>
                      <div>姓名 :{{ v.name }}</div>
                      <div>科室:{{ v.department }}</div>
                      <div> 
                        <span style="color: red">￥</span
                        ><span style="font-size: 20px; color: red; font-weight: bold">{{
                          v.price
                        }}</span>
                        <span style="color: red">起</span>
                      </div>
                    </div>
                  </div>
                </van-list>
              </div>
            </van-tab>
          </van-tabs>
        </van-tab>
        <van-tab title="好物推荐">
          <div class="tablist2">
            <div v-for="(v, i) in shop" :key="i" class="tablist2-item" @click="toDetail(v)">
              <img v-lazy="v.image" style="width: 100%" alt="" />
              <div>
                <span style="color: white; border: 1px solid red; background: red">自营</span>
                {{ v.title }}
              </div>
              <div>
                <span style="color: red">￥</span
                ><span style="font-size: 20px; color: red; font-weight: bold">{{
                  v.oderprice
                }}</span>
              </div>
            </div>
          </div>
        </van-tab>
      <van-tab title="健康科普" class="tablistok">

          <van-list @load="load1" :loading="loading" finished-text="数据没有了" :finished="finished">
            <div class="tablist3">

              <!-- 虚拟列表 -->
              <VirtualListScroll :height="750" :pageMode="false" :flxedBlockHeight="120" :data="heathy">
                <template v-slot:default="item">
                  <div class="tablist3-item">
                    <dl style="background: #ccc; margin-top: 50px; height: 150px; border-radius: 20px; text-align: center; align-items: center; width: 90%; margin: 50px auto;"  >
                       <dd>
                        <img v-lazy="item.image" style="width: 80%;height: 80px; margin-top: 20px"  alt="" />
                      </dd>
                      <dt>
                        <p style="font-weight: bold">{{ item.title }}</p>
                        <p>{{ item.desc }}</p>
                      </dt>
                     
                    </dl>
                  </div>
                </template>
              </VirtualListScroll>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script lang="ts" setup>
import VirtualListScroll from 'virtual-list-scroll-v3'
import axios from '../../utils/request'
import { ref, onMounted, onBeforeUnmount, reactive, defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import Ggbj from '@/components/ggbj/index.vue'
const router = useRouter()
const onClickButton = () => {
  router.push('/search')
}
const images = [
  'https://kano.guahao.com/6aD932278297',
  'https://kano.guahao.com/ogV924963574',
  'https://kano.guahao.com/W7w929606964'
]
//动态搜索
const searchValue = ref<string>('') // 搜索框的值
const defaultContents = ref<string[]>(['专家问诊', '健康VIP', '一病多问']) // 默认内容数组
let currentIndex = ref<number>(0) // 当前索引
let intervalId: ReturnType<typeof setInterval> // 定时器的 ID

// 切换默认内容的函数
const switchContent = () => {
  currentIndex.value = (currentIndex.value + 1) % defaultContents.value.length
  searchValue.value = defaultContents.value[currentIndex.value]
}

// 组件挂载时设置定时器
onMounted(() => {
  searchValue.value = defaultContents.value[currentIndex.value] // 设置初始值
  intervalId = setInterval(switchContent, 1500) // 每 1.5秒切换一次
})

// 组件卸载时清除定时器
onBeforeUnmount(() => {
  clearInterval(intervalId)
})

const tabbarlist: any = ref([])
const GetTabbar = async () => {
  const res = await axios.get('/api/v1/tabtitle')
  tabbarlist.value = res.data.data
}
GetTabbar()

// 上拉加载状态
const loading = ref(false)
const finished = ref(false)

// 页码
const config = reactive({
  currentPage: 1,
  pageSize: 10
})

// 触底事件
const load = () => {
  config.currentPage++
  loading.value = true
  GetTabbarChild()
  // GetHeathy()
}
const load1 = () => {
  config.currentPage++
  loading.value = true
  // GetTabbarChild()
  GetHeathy()
}
const show = ref(true)
onMounted(() => {
  window.addEventListener('scroll', scrolling)
})
onMounted(() => {
  window.removeEventListener('scroll', scrolling)
})
const scrolling = () => {
  const scrollTop =
    window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  if (scrollTop >= 140) {
    show.value = false
  } else if (scrollTop < 140) {
    show.value = true
  }
}
scrolling()
const tabbarlistChild: any = ref([])
const GetTabbarChild = async () => {
  const res = await axios.get('/api/v1/tab')
  setTimeout(() => {
    tabbarlistChild.value = res.data.data.slice(0, config.currentPage * config.pageSize)
    loading.value = false
    finished.value = tabbarlistChild.value.length >= res.data.data.length
  }, 1500)
}
GetTabbarChild()
// 详情
const Detail = async (v: any) => {
  router.push({
    path: `/detail/${v.id}`
  })
}
//好物详情
const toDetail = async (v: any) => {
  router.push({
    path: `/todetail/${v.id}`
  })
}
// tab切换2
const shop: any = ref([])
const GetShop = async () => {
  const res = await axios.get('/api/v1/thing')
  shop.value = res.data.data.slice(0, 15)
}
GetShop()
// tab3切换
const heathy: any = ref([])
const GetHeathy = async () => {
  const res = await axios.get('/api/v1/health')
  setTimeout(() => {
    heathy.value = res.data.data.slice(0, config.currentPage * config.pageSize)
    loading.value = false
    finished.value = heathy.value.length >= res.data.data.length
  }, 1500)
}
GetHeathy()

//地图
const city = ref<string[]>([])
onMounted(() => {
  const citylist = JSON.parse(localStorage.getItem('city') as string)
  if (citylist) {
    city.value = citylist.cityName
  } else {
    city.value = '全国' as any
  }
})
</script>